/**
 * useMemo
 *    概念：
 *      是一个 React Hook，它在每次重新渲染的时候能够缓存计算的结果。【计算属性】
 *
 *    语法：
 *      const value = useMemo(callback, deep)
 *        callback - 计算 value 的一个函数
 *           1. 默认触发一次
 *           2. 当依赖项发生变化时，会再次触发
 *        deep     - 依赖项数组
 *
 *    特点：
 *      有缓存，可以优化函数的执行次数
 */

import { useMemo, useState } from "react";
import useCount from "./hooks/useCount";

export default function App() {
  const [first, setFirst] = useState("张");
  const [last, setLast] = useState("三");
  const { count, increment } = useCount();

  // const callback = () => {
  //   console.log("callback");
  //   return first + "" + last;
  // };

  // const fullName = callback();

  const fullName = useMemo(() => {
    console.log("useMemo");
    return first + "" + last;
  }, [first, last]);

  return (
    <div>
      <h1>App</h1>

      <button onClick={() => setFirst("李")}>{first}</button>
      <button onClick={() => setLast("四")}>{last}</button>
      <button>{fullName}</button>

      <hr />
      <button onClick={() => increment()}>{count}</button>
    </div>
  );
}
